<template>
  <a-card class="j-modules-plan-box" :loading="cardLoading" :bordered="false">
    <div class="full-calendar">
      <FullCalendar 
        ref="baseCalendar"
        selectable="true"
        weekNumberCalculation="ISO"
        :locale="locale"
        :firstDay="firstDay"
        :header="header"
        :plugins="calendarPlugins"
        :default-view="currentView"
        :buttonText="buttonText"
        :events="calendarEventsNew"
        :fixedWeekCount="fixedWeekCount"
        :showNonCurrentDates="showNonCurrentDates"
        :eventLimit="5"
        :contentHeight="900"
        @datesRender="datesRender"
        @eventClick="handleEventSelected"
        @select="select"
      >
      </FullCalendar>
    </div>
    <!-- 弹窗区域 -->
    <eoa-plan-modal ref="baseModal" @ok="handleModalOk"/>

  </a-card>
</template>

<script>
  import moment from 'moment'
  import { mapGetters } from 'vuex'
  import { getAction } from '@/api/manage'
  import EoaPlanModal from './modules/EoaPlanModal'
  import FullCalendar from '@fullcalendar/vue'
  import dayGridPlugin from '@fullcalendar/daygrid'
  import timeGridPlugin from '@fullcalendar/timegrid'
  import interactionPlugin from '@fullcalendar/interaction'
  import '@fullcalendar/core/main.css'
  import '@fullcalendar/timegrid/main.css'
  const defaultFormat = "YYYY-MM-DD HH:mm:ss"
  export default {
    name: 'EoaPlanView',
    components: { EoaPlanModal, FullCalendar },
    data: function () {
      let self = this
      return {
        startTime:"",
        endTime:"",
        cardLoading: true,
        url: {
          list: '/api/erp/workbench/plan/list',
          queryMyCreation: '/api/erp/workbench/plan/queryMyCreation',
        },
        calendarPlugins: [
          dayGridPlugin,
          interactionPlugin,
          timeGridPlugin
        ],
        locale: 'zh-cn',
        // 按钮文字
        buttonText: {
          today: '今天',
          day: '日',
          month: '月',
          week: '周'
        },
        // 头部排列方式
        header: {
          left: 'prev,next, today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        currentView: 'dayGridMonth',
        // 设置每周开始日期为周日
        firstDay: 1,
        // agenda视图下是否显示all-day
        allDaySlot: false,
        // agenda视图下all-day的显示文本
        // allDayText: '全天',
        // 时区默认本地的
        timezone: 'local',
        // 周视图和日视同的左侧时间显示
        slotLabelFormat: 'HH:mm',
        // 设置第二天阈值
        nextDayThreshold: '00:00:00',
        fixedWeekCount: false,
        showNonCurrentDates: true,
        eventLimit: 5,
        eventLimitClick: 'day',
        eventLimitText: 'More',
        calendarEventsNew: [],
        eventDataSource: [],
        // k=id, v=record
        eventMaps: {}
      }
    },
    created() {
      this.startTime=moment().subtract(15, 'days').format(defaultFormat);
      this.endTime=moment().add(15, 'days').format(defaultFormat);
      this.loadData()
    },
    methods: {
      ...mapGetters(['userInfo']),
      loadData() {
        getAction(this.url.queryMyCreation,{'handlerId':this.userInfo().empId,'startTime':this.startTime,'endTime':this.endTime}).then(res => {
          if (res.success) {
            this.eventDataSource = res.result
            let eventMaps = {}
            res.result.forEach(item => eventMaps[item.id] = item)
            this.eventMaps = eventMaps
            this.renderCalendar()
          } else {
            this.$message.warn(res.message)
          }
        }).finally(() => {
          this.cardLoading = false
        })
      },
      renderCalendar (currentView) {
        const dateFormat = 'YYYY-MM-DD'
        const timeFormat = 'HH:mm:ss'
        const datetimeFormat = dateFormat + ' ' + timeFormat

        this.calendarEventsNew = this.eventDataSource.map(item => {
          let { id, title, startTime, endTime, urgentLevel: level, status,planColor } = item
          let event = {
            id, title,
            start: new Date(startTime).getTime(),
            end: new Date(endTime).getTime(),
            backgroundColor: planColor,
            borderColor: planColor
          }
          return event
        })
      },
      datesRender (info) {
        this.currentView = info.view.type
        if(info.view.type === 'dayGridMonth'){
          this.startTime = moment(info.view.currentStart).subtract(5, 'days').format(defaultFormat);
          this.endTime = moment(info.view.currentEnd).add(5, 'days').format(defaultFormat);
        } else {
          this.startTime = moment(info.view.currentStart).format(defaultFormat);
          this.endTime = moment(info.view.currentEnd).format(defaultFormat);
        }
        this.loadData()
      },
      handleModalOk () {
        this.loadData()
      },
      /** 点击事件时触发 */
      handleEventSelected (info) {
        let { id } = info.event
        this.$refs.baseModal.edit(this.eventMaps[id])
      },
      select (info) {
        console.log(info);
        this.$refs.baseModal.addEvent(moment(info.start.getTime()), moment(info.end.getTime()), info.view)
      }
    }
  }
</script>

<style scoped lang="less">

</style>